<template>
    <view class="content">
        <view class="class1">
            <view class="box">
                <view class="title">填写真实信息</view>
                <view class="item">
                    <view class="item-left">姓名</view>
                    <view class="item-right">
                        <input type="text" v-model="name" placeholder="请输入真实姓名" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">性别</view>
                    <view class="item-right" @click="show_1 = true">
                        <input type="text" v-model="sex" placeholder="请选择" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#b6b6b6" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">出生年月</view>
                    <view class="item-right" @click="KStimeShow = true">
                        <input type="text" v-model="startTime" placeholder="请选择" placeholder-class="p-inp" class="inp" disabled>
                        <image src="../../static/icon/time_05.png" class="time-05"></image>
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">职业</view>
                    <view class="item-right">
                        <input type="text" v-model="job" placeholder="请输入职业" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">联系电话</view>
                    <view class="item-right">
                        <input type="number" v-model="tel" placeholder="请输入联系电话" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">微信号</view>
                    <view class="item-right">
                        <input type="text" v-model="wechat" placeholder="请输入微信号" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">星座</view>
                    <view class="item-right" @click="show_2 = true">
                        <input type="text" v-model="star" placeholder="请选择" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#b6b6b6" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">紧急联系人</view>
                    <view class="item-right">
                        <input type="text" v-model="jname" placeholder="请输入紧急联系人" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view class="item-left">紧急联系电话</view>
                    <view class="item-right">
                        <input type="number" v-model="jtel" placeholder="请输入紧急联系电话" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="item">
                    <view class="item-left">报名费</view>
                    <view class="price">
                        ￥<text>{{money}}</text>
                    </view>
                </view>
            </view>
            
            <view class="tip1">此信息不公开，仅用于活动报名</view>
            <view class="btn" @click="doSubmit">提交并支付</view>
            <view class="tip2">指定报名单位：长春市猫爪文化传播有限公司</view>
        </view>
        
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        
        <u-select v-model="show_1" mode="single-column" :list="sexList" value-name="id" label-name="name" @confirm="confirmMore($event, 1)"></u-select>
        <u-select v-model="show_2" mode="single-column" :list="starList" value-name="id" label-name="name" @confirm="confirmMore($event, 2)"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                KStimeShow: false, //出生年月
                startTime: '', //出生年月
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                id: '',
                show_1: false,
                show_2: false,
                sexList: [{id: 1, name: '男'},{id: 2, name: '女'}],
                sex: '男',
                sexId: 1,
                starList: [],//星座列表
                star: '',
                starId: '',
                name: '', //姓名
                job: '', //职业
                tel: '', //联系电话
                wechat: '', //微信号
                jname: '', //紧急联系人
                jtel: '', //紧急联系电话
                money: 0,
            };
        },
        onLoad(option) {
            this.id = option.id
            this.money = option.money
            this.getConstellation()
        },
        methods: {
            // 提交并支付
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入真实姓名')
                    return
                }
                if (!this.startTime) {
                    this.$toast('请选择出生年月')
                    return
                }
                if (!this.job) {
                    this.$toast('请输入职业')
                    return
                }
                if (!this.tel) {
                    this.$toast('请输入联系电话')
                    return
                }
                if (!this.$checkPhone(this.tel)) {
                	this.$toast('联系电话格式不正确');
                	return false;
                }
                if (!this.wechat) {
                    this.$toast('请输入微信号')
                    return
                }
                if (!this.starId) {
                    this.$toast('请输入星座')
                    return
                }
                if (!this.jname) {
                    this.$toast('请输入紧急联系人')
                    return
                }
                if (!this.jtel) {
                    this.$toast('请输入紧急联系电话')
                    return
                }
                if (!this.$checkPhone(this.jtel)) {
                	this.$toast('紧急联系电话格式不正确');
                	return false;
                }
                
                this.$ajax('order_enroll', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,
                    name: this.name,//姓名
                    gender: this.sexId,//性别 1男2女
                    birthday: this.startTime,//出生年月
                    career: this.job,//职业
                    phone: this.tel,//联系电话
                    wechat: this.wechat,//微信号
                    constellation_id: this.starId,//星座id
                    urgent_name: this.jname,//紧急联系人
                    urgent_phone: this.jtel,//紧急联系电话
                }).then(ret => {
                	if (ret.success == 1000) {
                        // order_status 1支付 2成功
                        if (ret.detail.order_status == 1) {
                            this.$gTo(`/pages/pay/pay?id=${ret.detail.order_id}&money=${ret.detail.order_amount}`)
                        } else {
                            this.$toast('报名成功');
                            setTimeout(() => {
                                this.$backT()
                            }, 300)
                        }
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            
            confirmMore(e, num) {
                console.log(e)
                if (num == 1) {
                    this.sex = e[0].label
                    this.sexId = e[0].value
                } else if (num == 2) {
                    this.star = e[0].label
                    this.starId = e[0].value
                }
            },
            
            // 获取星座
            getConstellation() {
            	this.$ajax('constellation', {
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.starList = ret.detail.constellation
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f5f5f5;
    }
    .class1 {
    	height: 400rpx;
    	width: 100%;
    	background: linear-gradient(180deg, #3dc2ef, #71deed, #f5f5f5);
        padding: 30rpx 25rpx;
    }
    .box{
        background-color: #fff;
        padding: 0 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        padding: 30rpx 0 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-right{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        width: 390rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }
    .p-inp{
        color: #c6c6c6;
    }
    .time-05{
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
    }
    .price{
        color: #f62a2a;
    }
    .price>text{
        font-size: 46rpx;
    }
    
    .tip1{
        font-size: 24rpx;
        color: #bfbfbf;
        padding-bottom: 50rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        background-color: #40bef1;
        padding: 25rpx;
        border-radius: 50rpx;
    }
    .tip2{
        font-size: 22rpx;
        color: #737373;
        text-align: center;
        padding: 20rpx 0 50rpx;
    }
    

</style>
